<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>行情预警</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.alert-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.alert-overview {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 20px;
			margin-bottom: 30px;
		}
		.overview-card {
			background: #fff;
			border-radius: 12px;
			padding: 25px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			text-align: center;
			position: relative;
		}
		.overview-icon {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 15px;
			font-size: 24px;
			color: white;
		}
		.critical { background: linear-gradient(135deg, #ff4757, #ff6b7a); }
		.warning { background: linear-gradient(135deg, #ffa726, #ffcc02); }
		.info { background: linear-gradient(135deg, #42a5f5, #478ed1); }
		.success { background: linear-gradient(135deg, #66bb6a, #81c784); }
		
		.overview-number {
			font-size: 32px;
			font-weight: bold;
			color: #333;
			margin-bottom: 8px;
		}
		.overview-label {
			color: #666;
			font-size: 14px;
		}
		.pulse {
			position: absolute;
			top: 10px;
			right: 10px;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: #ff4757;
			animation: pulse 2s infinite;
		}
		@keyframes pulse {
			0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7); }
			70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 71, 87, 0); }
			100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }
		}

		.alert-tabs {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			margin-bottom: 25px;
			overflow: hidden;
		}
		.tab-header {
			display: flex;
			background: #f8f9fa;
			border-bottom: 1px solid #e9ecef;
		}
		.tab-item {
			flex: 1;
			padding: 15px 20px;
			text-align: center;
			cursor: pointer;
			transition: all 0.3s;
			border-bottom: 3px solid transparent;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
		}
		.tab-item.active {
			background: #fff;
			color: #409eff;
			border-bottom-color: #409eff;
		}
		.tab-content {
			padding: 25px;
		}

		.alert-list {
			display: flex;
			flex-direction: column;
			gap: 15px;
		}
		.alert-item {
			background: #fff;
			border: 1px solid #e9ecef;
			border-radius: 8px;
			padding: 20px;
			display: flex;
			align-items: center;
			gap: 15px;
			transition: all 0.2s;
			position: relative;
		}
		.alert-item:hover {
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
			transform: translateY(-1px);
		}
		.alert-level {
			width: 8px;
			height: 60px;
			border-radius: 4px;
		}
		.level-critical { background: #ff4757; }
		.level-warning { background: #ffa726; }
		.level-info { background: #42a5f5; }
		
		.alert-icon {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			color: white;
		}
		.alert-content {
			flex: 1;
		}
		.alert-title {
			font-size: 16px;
			font-weight: 600;
			color: #333;
			margin-bottom: 5px;
		}
		.alert-desc {
			color: #666;
			font-size: 14px;
			line-height: 1.4;
			margin-bottom: 8px;
		}
		.alert-meta {
			display: flex;
			gap: 15px;
			font-size: 12px;
			color: #999;
		}
		.alert-actions {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.config-section {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 25px;
			margin-bottom: 25px;
		}
		.config-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.config-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 20px;
		}
		.config-item {
			border: 1px solid #e9ecef;
			border-radius: 8px;
			padding: 20px;
		}
		.config-item-title {
			font-weight: 500;
			color: #333;
			margin-bottom: 15px;
		}
		.threshold-input {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 10px;
		}

		.statistics-card {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 12px;
			padding: 25px;
			margin-bottom: 25px;
		}
		.stats-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 20px;
			margin-top: 20px;
		}
		.stat-item {
			text-align: center;
			background: rgba(255, 255, 255, 0.1);
			padding: 15px;
			border-radius: 8px;
		}
		.stat-number {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.stat-label {
			font-size: 14px;
			opacity: 0.9;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="alert-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>行情预警</h2>
				<p>实时监控价格异常波动、库存预警，确保供应链稳定</p>
			</div>

			<!-- 预警概览 -->
			<div class="alert-overview">
				<div class="overview-card">
					<div class="pulse" v-if="alertStats.critical > 0"></div>
					<div class="overview-icon critical">
						<i class="el-icon-warning"></i>
					</div>
					<div class="overview-number">{{alertStats.critical}}</div>
					<div class="overview-label">紧急预警</div>
				</div>
				<div class="overview-card">
					<div class="overview-icon warning">
						<i class="el-icon-warning-outline"></i>
					</div>
					<div class="overview-number">{{alertStats.warning}}</div>
					<div class="overview-label">一般预警</div>
				</div>
				<div class="overview-card">
					<div class="overview-icon info">
						<i class="el-icon-info"></i>
					</div>
					<div class="overview-number">{{alertStats.info}}</div>
					<div class="overview-label">信息提醒</div>
				</div>
				<div class="overview-card">
					<div class="overview-icon success">
						<i class="el-icon-success"></i>
					</div>
					<div class="overview-number">{{alertStats.processed}}</div>
					<div class="overview-label">已处理</div>
				</div>
			</div>

			<!-- 预警统计 -->
			<div class="statistics-card">
				<h3><i class="el-icon-data-analysis"></i> 预警统计概览</h3>
				<div class="stats-grid">
					<div class="stat-item">
						<div class="stat-number">24</div>
						<div class="stat-label">今日预警</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">156</div>
						<div class="stat-label">本周预警</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">89.2%</div>
						<div class="stat-label">处理率</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">12分钟</div>
						<div class="stat-label">平均响应时间</div>
					</div>
				</div>
			</div>

			<!-- 预警分类标签 -->
			<div class="alert-tabs">
				<div class="tab-header">
					<div 
						v-for="tab in alertTabs" 
						:key="tab.id"
						:class="['tab-item', {active: activeTab === tab.id}]"
						@click="switchTab(tab.id)">
						<i :class="tab.icon"></i>
						{{tab.name}}
						<el-badge :value="tab.count" :type="tab.badgeType" v-if="tab.count > 0"></el-badge>
					</div>
				</div>
				
				<div class="tab-content">
					<!-- 价格异常预警 -->
					<div v-if="activeTab === 'price'" class="alert-list">
						<div v-for="alert in priceAlerts" :key="alert.id" class="alert-item">
							<div :class="['alert-level', 'level-' + alert.level]"></div>
							<div :class="['alert-icon', alert.level]">
								<i :class="alert.icon"></i>
							</div>
							<div class="alert-content">
								<div class="alert-title">{{alert.title}}</div>
								<div class="alert-desc">{{alert.description}}</div>
								<div class="alert-meta">
									<span><i class="el-icon-time"></i> {{alert.time}}</span>
									<span><i class="el-icon-location"></i> {{alert.region}}</span>
									<span><i class="el-icon-goods"></i> {{alert.category}}</span>
								</div>
							</div>
							<div class="alert-actions">
								<el-button size="small" type="primary" @click="handleAlert(alert)">处理</el-button>
								<el-button size="small" @click="viewDetail(alert)">详情</el-button>
							</div>
						</div>
					</div>

					<!-- 库存预警 -->
					<div v-if="activeTab === 'stock'" class="alert-list">
						<div v-for="alert in stockAlerts" :key="alert.id" class="alert-item">
							<div :class="['alert-level', 'level-' + alert.level]"></div>
							<div :class="['alert-icon', alert.level]">
								<i :class="alert.icon"></i>
							</div>
							<div class="alert-content">
								<div class="alert-title">{{alert.title}}</div>
								<div class="alert-desc">{{alert.description}}</div>
								<div class="alert-meta">
									<span><i class="el-icon-time"></i> {{alert.time}}</span>
									<span><i class="el-icon-location"></i> {{alert.region}}</span>
									<span><i class="el-icon-goods"></i> {{alert.category}}</span>
								</div>
							</div>
							<div class="alert-actions">
								<el-button size="small" type="warning" @click="handleAlert(alert)">补货</el-button>
								<el-button size="small" @click="viewDetail(alert)">详情</el-button>
							</div>
						</div>
					</div>

					<!-- 需求预警 -->
					<div v-if="activeTab === 'demand'" class="alert-list">
						<div v-for="alert in demandAlerts" :key="alert.id" class="alert-item">
							<div :class="['alert-level', 'level-' + alert.level]"></div>
							<div :class="['alert-icon', alert.level]">
								<i :class="alert.icon"></i>
							</div>
							<div class="alert-content">
								<div class="alert-title">{{alert.title}}</div>
								<div class="alert-desc">{{alert.description}}</div>
								<div class="alert-meta">
									<span><i class="el-icon-time"></i> {{alert.time}}</span>
									<span><i class="el-icon-location"></i> {{alert.region}}</span>
									<span><i class="el-icon-goods"></i> {{alert.category}}</span>
								</div>
							</div>
							<div class="alert-actions">
								<el-button size="small" type="success" @click="handleAlert(alert)">关注</el-button>
								<el-button size="small" @click="viewDetail(alert)">详情</el-button>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 预警配置 -->
			<div class="config-section">
				<div class="config-title">
					<i class="el-icon-setting"></i>
					预警参数配置
				</div>
				<div class="config-grid">
					<div class="config-item">
						<div class="config-item-title">价格波动预警</div>
						<div class="threshold-input">
							<span>涨幅超过</span>
							<el-input-number v-model="config.priceRise" :min="0" :max="100" size="small"></el-input-number>
							<span>%</span>
						</div>
						<div class="threshold-input">
							<span>跌幅超过</span>
							<el-input-number v-model="config.priceDrop" :min="0" :max="100" size="small"></el-input-number>
							<span>%</span>
						</div>
						<el-switch v-model="config.priceAlertEnabled" active-text="启用"></el-switch>
					</div>
					
					<div class="config-item">
						<div class="config-item-title">库存预警</div>
						<div class="threshold-input">
							<span>库存低于</span>
							<el-input-number v-model="config.stockThreshold" :min="0" size="small"></el-input-number>
							<span>%</span>
						</div>
						<div class="threshold-input">
							<span>断货预警提前</span>
							<el-input-number v-model="config.stockDays" :min="1" :max="30" size="small"></el-input-number>
							<span>天</span>
						</div>
						<el-switch v-model="config.stockAlertEnabled" active-text="启用"></el-switch>
					</div>

					<div class="config-item">
						<div class="config-item-title">需求预警</div>
						<div class="threshold-input">
							<span>需求增长超过</span>
							<el-input-number v-model="config.demandGrowth" :min="0" :max="500" size="small"></el-input-number>
							<span>%</span>
						</div>
						<div class="threshold-input">
							<span>监控周期</span>
							<el-select v-model="config.demandPeriod" size="small">
								<el-option label="每日" value="daily"></el-option>
								<el-option label="每周" value="weekly"></el-option>
								<el-option label="每月" value="monthly"></el-option>
							</el-select>
						</div>
						<el-switch v-model="config.demandAlertEnabled" active-text="启用"></el-switch>
					</div>
				</div>
				<div style="text-align: center; margin-top: 20px;">
					<el-button type="primary" @click="saveConfig">保存配置</el-button>
					<el-button @click="resetConfig">重置</el-button>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					activeTab: 'price',
					alertStats: {
						critical: 3,
						warning: 8,
						info: 12,
						processed: 45
					},
					alertTabs: [
						{id: 'price', name: '价格预警', icon: 'el-icon-coin', count: 5, badgeType: 'danger'},
						{id: 'stock', name: '库存预警', icon: 'el-icon-box', count: 3, badgeType: 'warning'},
						{id: 'demand', name: '需求预警', icon: 'el-icon-trend-charts', count: 2, badgeType: 'info'}
					],
					priceAlerts: [
						{
							id: 1,
							level: 'critical',
							icon: 'el-icon-warning',
							title: '有机蔬菜价格异常上涨',
							description: '近24小时内有机小白菜价格上涨28%，远超正常波动范围，建议立即关注市场动态',
							time: '2小时前',
							region: '华东地区',
							category: '蔬菜类'
						},
						{
							id: 2,
							level: 'warning',
							icon: 'el-icon-warning-outline',
							title: '进口牛肉价格持续下跌',
							description: '澳洲牛肉价格连续7天下跌，累计跌幅达15%，可能影响后续采购计划',
							time: '4小时前',
							region: '全国',
							category: '肉类'
						}
					],
					stockAlerts: [
						{
							id: 3,
							level: 'critical',
							icon: 'el-icon-box',
							title: '冰岛三文鱼库存告急',
							description: '当前库存仅剩2天用量，预计48小时内断货，建议紧急补货',
							time: '1小时前',
							region: '华南地区',
							category: '海鲜类'
						},
						{
							id: 4,
							level: 'warning',
							icon: 'el-icon-goods',
							title: '有机蔬菜库存偏低',
							description: '多种有机蔬菜库存降至安全线以下，建议提前安排采购',
							time: '3小时前',
							region: '华北地区',
							category: '蔬菜类'
						}
					],
					demandAlerts: [
						{
							id: 5,
							level: 'info',
							icon: 'el-icon-trend-charts',
							title: '冷冻食品需求激增',
							description: '受天气影响，冷冻食品需求量较上周增长45%，建议增加库存',
							time: '6小时前',
							region: '华东地区',
							category: '冷冻食品'
						}
					],
					config: {
						priceRise: 20,
						priceDrop: 15,
						priceAlertEnabled: true,
						stockThreshold: 20,
						stockDays: 3,
						stockAlertEnabled: true,
						demandGrowth: 30,
						demandPeriod: 'weekly',
						demandAlertEnabled: true
					}
				}
			},
			methods: {
				switchTab(tabId) {
					this.activeTab = tabId;
				},
				handleAlert(alert) {
					this.$confirm('确定要处理这个预警吗？', '确认操作', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'info'
					}).then(() => {
						this.$message.success('预警已标记为处理中');
						// 实际应用中这里会调用API处理预警
					});
				},
				viewDetail(alert) {
					this.$message.info(`查看预警详情: ${alert.title}`);
					// 实际应用中这里会打开详情弹窗或跳转到详情页面
				},
				saveConfig() {
					this.$message.success('预警配置已保存');
					// 实际应用中这里会保存配置到后端
				},
				resetConfig() {
					this.config = {
						priceRise: 20,
						priceDrop: 15,
						priceAlertEnabled: true,
						stockThreshold: 20,
						stockDays: 3,
						stockAlertEnabled: true,
						demandGrowth: 30,
						demandPeriod: 'weekly',
						demandAlertEnabled: true
					};
					this.$message.info('配置已重置为默认值');
				}
			}
		});
	</script>
</body>
</html>